<template>
	<view class="container" v-if="Array.isArray(datas) && datas.length">
		<scroll-view class="typeCardBox" scroll-x :scroll-into-view="`type-card-${activeTypeCard}`"
			scroll-with-animation>
			<view v-for="item in datas" :id="`type-card-${item._id}`" :key="item._id" class="typeCardBox-typeCard"
				:class="activeTypeCard === item._id ? 'typeCardBox-typeCard-active': ''"
				@click="() => resetPageParams(handleTypeCard(item._id))">
				{{item.title}}
			</view>
		</scroll-view>
		<view class="columnBox">
			<view class="leftBox">
				<view v-for="item in datas.find(val => val._id === activeTypeCard)?.children" :key="item._id"
					class="leftBox-tag" :class="activeTag === item._id ? 'leftBox-tag-active' : ''"
					@click="() => resetPageParams(handleTag(item._id))">
					{{item.title}}
				</view>
			</view>
			<view class="rightBox"
				v-if="(type === 'READ' && Array.isArray(goodsData) && goodsData.length) || type === 'ADD'">
				<view class="rightBox-wrapper">
					<slot name="addCard"></slot>
					<view class="rightBox-detail" v-for="item in goodsData" :key="item._id"
						@click="() => handleClick(item)">
						<image class="rightBox-detail-image" mode="aspectFill" :src="item?.goods_thumb?.url"></image>
						<view class="rightBox-detail-info">
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
				<uni-load-more @clickLoadMore="handleMore" :status="status" color='#888'
					iconType="auto"></uni-load-more>
			</view>
			<view class="emptyPage" v-else><empty-page></empty-page></view>
		</view>
	</view>
	<empty-page v-else></empty-page>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onReachBottom
	} from '@dcloudio/uni-app'

	const status = ref('more')
	const pageParams = ref({
		pageCurrent: 1,
		pageSize: 30
	})

	defineProps({
		activeTypeCard: String,
		activeTag: String,
		datas: Array,
		goodsData: Array,
		handleTypeCard: Function,
		handleTag: Function,
		handleClick: Function,
		type: String
	})

	const resetPageParams = (fn) => {
		pageParams.value = {
			...pageParams.value,
			pageCurrent: 1,
		}
		fn && fn()
	}

	const handleMore = (newPageCurrent) => {
		console.log(newPageCurrent)
	}

	onReachBottom(() => {
		const {
			pageCurrent
		} = pageParams.value
		const newPageCurrent = pageCurrent + 1
		pageParams.value = {
			...pageParams.value,
			pageCurrent: newPageCurrent,
		}
		handleMore(newPageCurrent)
	})
</script>

<style scoped lang="scss">
	@import url("/styles/common.scss");

	@mixin ellipse {
		box-sizing: border-box;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 0 8px;
	}

	.container {
		width: 100vw;
		padding-top: var(--margin-vertical);
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.typeCardBox {
		white-space: nowrap;
		width: 92vw;
		font-size: 14px;

		&-typeCard {
			@include ellipse();
			display: inline-block;
			min-width: 80px;
			max-width: 120px;
			height: 44px;
			line-height: 44px;
			text-align: center;
			background-color: #eee;
			border-radius: 4px;
			margin-right: calc(var(--margin-vertical) - 2px);

			&:last-child {
				margin-right: 0;
			}

			&-active {
				background-color: #cfe9ff;
				color: var(--primary-color);
			}
		}
	}

	.columnBox {
		width: 100%;
		margin-top: var(--margin-vertical);
		border-top: 1px solid #ddd;
		display: flex;
		font-size: 14px;

		.emptyPage {
			width: calc(100% - 80px);
			display: flex;
			justify-content: center;
			color: #888;
			margin: calc(var(--margin-vertical) * 2) 0;
		}
	}

	.leftBox {
		width: 80px;
		min-height: 90vh;
		background-color: whitesmoke;

		&-tag {
			@include ellipse();
			width: 100%;
			$height: 50px;
			height: $height;
			line-height: $height;
			text-align: center;
			padding: 0 12px;

			&-active {
				background-color: white;
				color: #888;
				font-weight: 600;
				position: relative;

				&:before {
					content: '';
					position: absolute;
					left: 0;
					top: 0;
					width: 4px;
					height: 100%;
					background-color: #cfe9ff;
					border-radius: 0 4px 4px 0;
				}
			}
		}
	}

	.rightBox {
		$image-size: 26vw;
		$image-margin: 12px;
		flex: 1;
		background-color: white;
		padding: 12px 0;

		&-wrapper {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-auto-rows: calc($image-size + $image-margin + 10vw);
			align-items: flex-start;
		}

		&-detail {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			box-sizing: border-box;

			&-image {
				width: $image-size;
				height: $image-size;
				background-color: whitesmoke;
				border-radius: 8px;
				margin-bottom: $image-margin;
			}

			&-info {
				width: $image-size;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				white-space: nowrap;
				text-align: center;
			}
		}
	}
</style>